<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>角色列表</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet"
	href="<%=path%>/lib/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="<%=path%>/lib/jquery-1.8.1.min.js"></script>
<script type="text/javascript"
	src="<%=path%>/lib/bootstrap/js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="<%=path%>/css/xcConfirm.css"/>
	<script src="<%=path%>/js/xcConfirm.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
	<h2 style="padding: 3%;">角色列表</h2>
	<div class="container">
		<div class="row clearfix">
			<div class="col-md-12 column">
			<input type="text" class="search-query" name="" placeholder="输入角色类型 / 角色名称" style="height: 3%;"/>
			<input type="button" class="btn btn-primary" name="" value="查询"/>
			<input type="button" class="btn btn-success" name="" value="增加角色" data-target="#addRole" data-toggle="modal"/>
			<!-- 添加角色 start -->
				<div class="modal fade" id="addRole" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
									&times;
								</button>
								<h4 class="modal-title" id="myModalLabel">
									添加角色
								</h4>
							</div>
							<div class="modal-body"  style="text-align: center;height: 4em;line-height: 4em;overflow: hidden;">
										<span></span><input type="text" style="width: 220px;height:29px" name="roleName" id="roleName" placeholder="角色名" />
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-success" id="submitAddRole">确认</button>
							</div>
						</div>
					</div>
		</div>
			<!-- 添加角色 end -->
				<table class="table table-hover">
					<thead>
						<tr>
							<th>编号</th>
							<th>角色名称</th>
							<th>状态</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${roles }" var="role" varStatus="col">


							<tr class="${col.count%2==0?'':'info' }">
								<td>${role.roleId }</td>
								<td>${role.roleName }</td>
									<td >
										<a  class="btn btn-warning update" onclick="getId(${role.roleId})">修改</a>
										<button class="btn btn-danger delete" onclick="getId(${role.roleId})">删除</button>
									</td>
								
							</tr>
						</c:forEach>
					</tbody>
				</table>
					<ul class="pager">
						  <li class="previous disabled"><a>上一页</a></li>
						  <li>1</li>
						  <li class="next disabled"><a>下一页</a></li>
						  <!-- disabled显示禁用 -->
					</ul>
				
			</div>
		</div>
	</div>
	<div class="" style="height: 768px;"></div>
	
	
		<script type="text/javascript">
			var id = null;
			$(function(){
				/* 更新 */
				 $(".update").click(function(){
					 if(id==4){
						 window.wxc.xcConfirm("权限不足", window.wxc.xcConfirm.typeEnum.error);
						 return;
					 }
					 var roleTitle=  "请输入新的角色名称:";
					 var roletxt = "<input style='width: 80%;' id='roleUpdateName'/>";
					 window.wxc.xcConfirm(roleTitle+roletxt, window.wxc.xcConfirm.typeEnum.confirm,{
						onOk:function(v){
							console.log(v);
								 var roleName=$("#roleUpdateName").val();
								 if(roleName==null||roleName==""){
									 window.wxc.xcConfirm("请输入新角色名称！", window.wxc.xcConfirm.typeEnum.error); 
									 return;
								 }
								 var role = {"roleId":id,"roleName":roleName};
								 $.ajax({
				                        type : 'POST',
				                        url : "roleUpdate.action",
				                        data : role,
				                        async:false,
				                        success : function(data) {
				                        	if(data=="yes"){
												 window.wxc.xcConfirm("修改成功", window.wxc.xcConfirm.typeEnum.info); 
												 window.location="roleList.action";  
											 }
				                        },
				                        error : function(data) {
				                        	 window.wxc.xcConfirm("修改失败", window.wxc.xcConfirm.typeEnum.error);
				                        }
				                });
				 		}
					}); 
				});  
				 /* 添加 */
				 $("#submitAddRole").click(function(){
					 var roleName = $("#roleName").val();
					 if(roleName==null||roleName==""){
						 return false;
					 }
					 $.ajax({
						 type:"post",
						 url:"insertRole.action",
						 data:{"roleName":roleName},
						 async:false,
						 success:function(result){
							 if(result=="yes"){
								
							 }else{
								 alert("添加失败！");
							 }
							 window.location.href="roleList.action";
						 },
						 error:function(){
							 
						 }
					 });
					 $("#addRoleForm").submit();
				 });
				/* 删除 */
				$(".delete").click(function(){
					if(!confirm("确认删除?"))return false;
					$.ajax({
						type:"post",
						url:"deleteRolebyId.action",
						data:{"roleId":id},
						anync:false,
						complete : function(data) {
							var result = data.responseText;
							if(result=="ex"){
								 window.wxc.xcConfirm("还有用户正在使用这个角色，请先删除或撤销此角色所关联的用户权限", window.wxc.xcConfirm.typeEnum.error);
								 return false;
							}else if(result=="yes"){
								window.location.href="roleList.action";
							}else{
		                       	 window.wxc.xcConfirm("删除失败", window.wxc.xcConfirm.typeEnum.error);
							}
                        }
					});
				});
			});
			function getId(data){
				id=data;
			}
		</script>
		<script src="js/canvas-nest.min.js" count="200" zindex="-2" opacity="0.5" color="47,135,193" type="text/javascript"></script>
</body>
</html>
